<template>
  <!-- v-if="isRolad" -->
  <div class="login">
    <div class="login_main">
      <div class="main_left">
        <img src="@/assets/img/login.png" alt="" />
      </div>
      <div class="main_right">
        <span class="title">管理员登录</span>
        <el-input
          prefix-icon="el-icon-user-solid"
          v-model="username"
        ></el-input>
        <el-input
          prefix-icon="el-icon-lock"
          v-model="password"
          type="password"
        ></el-input>
        <el-button @click="login">登录</el-button>
        <span class="btm_label">院内管理系统</span>
        <!-- <i class = "iconfont icon-shebeiguanli"></i> -->
      </div>
    </div>
  </div>
</template>

<script>
import layout from "@/view/home/index";
import BlankPage from "@/view/blankpage";
import asyncRouter from "./asyncRouter.js";

import { setToke } from "@/api/axios";
export default {
  data() {
    return {
      username: "",
      password: "",
      isRolad: false,
    };
  },
  created() {
    if (this.$store.state.login.addRoutes.length > 0) {
      return window.location.reload();
    }
    this.isRolad = true;

    let _self = this;
    document.onkeydown = function (e) {
      var key = window.event.keyCode;
      // console.log(_self.$route);
      if (_self.$route.path=='/login' && key == 13) {
        _self.login();
      }
    };
  },
  mounted() {
    sessionStorage.clear();
  },
  methods: {
    blankPage(router, sign) {
      // sign为了防止路由第一层layout(主页)设置为BlankPage(空白页);
      sign++;
      router.forEach((item) => {
        if (item.children && item.children.length > 0) {
          if (sign > 1) {
            item.component = "BlankPage";
          }
          this.blankPage(item.children, sign);
        }
      });
    },
    // 将后端传回的component 的字符串模式，改为我们前端路由需要的component模式
    loadPageByRoutes(str) {
      return function (resolve) {
        require([`@/view${str}`], resolve);
      };
    },
    // 递归路由表
    getAddRoutes(data) {
      data.forEach((item) => {
        if (item.component == "layout") {
          item.component = layout;
        } else if (item.component == "BlankPage") {
          item.component = BlankPage;
        } else {
          item.component = this.loadPageByRoutes(item.component);
        }

        if (item.children && item.children.length > 0) {
          this.getAddRoutes(item.children);
        }
      });
    },
    async login() {
      let data = {
        username: this.username,
        password: this.password,
      };
      if (!data.username || !data.password) {
        this.$message.error("请输入正确格式的账号密码");
        return;
      }
      this.$api.loginByPassword(data).then(async (res) => {
        const addRoutes = res.data.pcRole;
        // 设置token
        this.$store.dispatch("login/user_token", res.data.user.token);
        //解决登录成功后未刷新状态token生效
        await setToke();
        // 院长ID
        this.$store.dispatch("login/user_deanId", res.data.user.deanId);
        // 用户需要缓存的信息
        let user = {
          id: res.data.user.id,
          account: res.data.user.account,
          roleType: res.data.user.roleType,
        };

        this.$store.dispatch("login/user_info", user);
        // 路由ID数组pcMenuDepartmentId
        this.$store.dispatch("login/user_routeid", res.data.pcMenuDepartmentId);

        await this.$store.dispatch("login/user_information", addRoutes);

        let resultsRoutes = sessionStorage.getItem("addRoutes")
          ? JSON.parse(sessionStorage.getItem("addRoutes"))
          : [];

        // 将路由表递归,为了完成多级嵌套情况不会重复侧边栏和头部
        await this.blankPage(resultsRoutes, 0);

        // 将后端返回路由表转换为可用路由,主要针对component格式(字符串)
        await this.getAddRoutes(resultsRoutes);
        // console.log(resultsRoutes)
        this.$router.addRoutes(resultsRoutes);
        let toPathJson = sessionStorage.getItem("addRoutes");
        // console.log(toPathJson);
        let toPath = toPathJson ? JSON.parse(toPathJson) : [];
        let topath=toPath.length>1 ? toPath[0].path : "";
        if(!topath){
          return this.$message.error("该账号没有访问权限!!!")
        }
        this.$router.push({ path: topath });
      });
    },
  },
};
</script>


<style lang="scss">
.login {
  width: 100%;
  height: 100%;
  background: linear-gradient(-135deg, #c850c0, #4158d0);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 15px;
  .login_main {
    width: 960px;
    height: 643px;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-wrap: no-wrap;
    justify-content: space-between;
    align-items: center;
    padding: 0 90px;
    .main_left {
      img {
        max-width: 100%;
      }
    }
    .main_right {
      width: 274px;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      .title {
        font-family: Poppins-Bold;
        font-size: 24px;
        color: #333333;
        line-height: 1.2;
        text-align: center;
        width: 100%;
        padding-bottom: 54px;
      }
      .el-input {
        margin-bottom: 10px;
        line-height: 50px;
        height: 50px;
        .el-input__inner {
          height: 50px;
          line-height: 50px;
          border-radius: 2rem;
          font-size: 17px;
          padding-left: 40px;
        }
        .el-input__prefix {
          color: #767677;
          font-size: 20px;
          height: 50px;
          left: 15px;
        }
      }
      .el-button {
        margin-top: 20px;
        width: 100%;
        border-radius: 2rem;
        background-color: rgb(87, 184, 70);
        color: #fff;
        outline: none;
        height: 50px;
      }
      .btm_label {
        display: block;
        margin-top: 136px;
        // background: #c850c0;
        font-size: 13px;
        color: #666666;
      }
    }
  }
  @media screen and (max-width: 770px) {
    .login_main {
      // background: #c850c0;
      justify-content: center;
      height: 580px;
      .main_left {
        display: none;
      }
      .main_right {
        width: 100%;
      }
    }
  }
}
</style>